<template>
	<view class="goods" v-if="goods && goods.length>0">
		<view :class="index%2==0 ? 'item-left' : 'item-right'" v-for="(item, index) in goods" :key="index"
			@click="onGotoItemDetail(item)" :style="{
				'margin-bottom': index==goods.length-1 ? '20rpx' : '0rpx',
				'height': userInfo ? '550rpx' : '500rpx'
			}">
			<view class="item-content">
				<view class="img-container">
					<x-image :src="`${imageUrl}${item.filePath}`"></x-image>
					<!-- <view class="sale-out-mask" v-if="item.quantity <= 0">已售罄</view> -->
				</view>

				<view class="item-name x-text-multi">{{item.goodsName}}</view>

				<price :value="item.goodsPrice" />
				<!-- 
				<view v-if="userInfo" class="estimate">
					<view class="desc">预估会员价:</view>
					<view class="symbol">¥</view>
					<view class="value">{{(item.goodsPrice * (userInfo.discountRate*1.0/10)).toFixed(2)}}
					</view>
				</view> -->
				<view class="item-footer">
				</view>
			</view>
		</view>
		<view class="x-page-bottom-line"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import XImage from '@/components/image/xImage.vue'
	
	import XEstimatePrice from '@/components/price/xEstimatePrice.vue'
	
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		components: {
			XImage,
		},
		props: {
			goods: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				imageUrl: this.$Config.imageUrl,
			}
		},
		methods: {
			onGotoItemDetail(item) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + item.goodsId
				})
			},
		}
	}
</script>

<!-- 一行两个布局 -->
<style lang="scss" scoped>
	@import '@/mixins/theme/xTheme.scss';

	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 750rpx;
		background-color: $x-content-background;

		.item-left {
			width: 335rpx;
			height: 550rpx;
			border-radius: 16rpx;
			margin: 20rpx 8rpx 0 32rpx;
			background-color: white;
			display: inline-block;
		}

		.item-right {
			width: 335rpx;
			height: 550rpx;
			border-radius: 16rpx;
			margin: 20rpx 32rpx 0 8rpx;
			background-color: white;
			display: inline-block;
		}

		.item-content {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			position: relative;
			height: 100%;

			.img-container {
				width: 100%;
				height: 350rpx;
				position: relative;
				overflow: hidden;
				border-radius: 10rpx;

				.x-image {
					display: flex;
					justify-content: center;
					align-item: center;
					width: 100%;
				}

				.sale-out-mask {
					position: absolute;
					left: 50%;
					top: 50%;
					-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
					background-color: rgba(255, 255, 255, 0.7);
					display: flex;
					width: 100%;
					height: 100%;
					justify-content: center;
					align-items: center;
					color: #999;
					font-weight: 500;
				}
			}

			.item-name {
				font-size: 25rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #2D2D2D;
				line-height: 36rpx;
				margin: 10rpx 10rpx 0;
			}

			.item-sale-num-info {
				height: 31rpx;
				font-size: 22rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #B0B0B0;
				line-height: 31rpx;
				margin: auto 10rpx;
				position: absolute;
				bottom: 76rpx;
			}

			.price {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				position: absolute;
				bottom: 60rpx;
				left: 50%;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				color: #2d2d2d;

				// .symbol {
				// 	height: 36rpx;
				// 	font-size: 25rpx;
				// 	font-family: PingFang-SC-Bold, PingFang-SC;
				// 	font-weight: bold;
				// 	line-height: 36rpx;
				// }

				// .value {
				// 	margin-left: 2rpx;
				// 	height: 45rpx;
				// 	font-size: 33rpx;
				// 	font-family: PingFang-SC-Bold, PingFang-SC;
				// 	font-weight: bold;
				// 	line-height: 45rpx;
				// }
			}

			.estimate {
				display: flex;
				align-items: baseline;
				font-size: 26rpx;
				padding: 4rpx;
				border-radius: 2rpx;
				position: absolute;
				bottom: 15rpx;
				width: 100%;
				justify-content: center;
				background: #CAAA81;
				color: white;

				.desc {
					height: 25rpx;
					font-size: 25rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					// color: #2D2D2D;
					line-height: 25rpx;
				}

				.symbol {
					height: 30rpx;
					font-size: 20rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					line-height: 30rpx;
				}

				.value {
					margin-left: 2rpx;
					height: 35rpx;
					font-size: 25rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					line-height: 35rpx;
				}
			}
		}

	}
</style>